<template>
    <div class="common-box" v-if="boxIsShow">
        <div class="common-content-box">
            <div class="common-content-top-box">
                <div class="form_box">
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="活动名称" prop="name">
                            <el-input v-model="ruleForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="报名费用" prop="price">
                            <el-input v-model="ruleForm.price"></el-input>
                        </el-form-item>
                        <el-form-item label="排序" prop="level">
                            <el-input v-model="ruleForm.level"></el-input>
                        </el-form-item>
                        <el-form-item label="活动时间" prop="atime">
                            <el-date-picker
                            @change="handleDateChange"
                            v-model="ruleForm.atime"
                            type="datetimerange"
                            :default-time="['00:00:00', '23:25:29']" 
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            value-format="yyyy-MM-dd HH:mm:ss">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="截止报名" prop="endBaoming">
                            <el-date-picker
                            v-model="ruleForm.endBaoming"
                            type="datetime"
                            placeholder="选择日期时间"
                            value-format="yyyy-MM-dd HH:mm:ss">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="活动地点" prop="address">
                            <el-input v-model="ruleForm.address"></el-input>
                        </el-form-item>
                        <el-form-item label="活动期数" prop="activityIndex">
                            <el-input v-model="ruleForm.activityIndex" placeholder="样式：第一期"></el-input>
                        </el-form-item>
                        <el-form-item label="活动名额" prop="minge">
                          <el-input v-model="ruleForm.minge" type="number"></el-input>
                      </el-form-item>
                        <el-form-item label="活动封面">
                            <el-upload
                                class="upload-demo"
                                :action="UPLOAD_URL"
                                :on-success="handleSuccess"
                                multiple="false"
                                list-type="picture-card"
                                :limit="uploadNum"
                                :file-list="fileList">
                                <el-button size="small" type="primary">点击上传</el-button>
                                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                            </el-upload>
                        </el-form-item>
                      </el-form-item>
                      <el-form-item label="活动小图">
                          <el-upload
                              class="upload-demo"
                              :action="UPLOAD_URL"
                              :on-success="handleSuccess2"
                              multiple="false"
                              list-type="picture-card"
                              :limit="uploadNum"
                              :file-list="fileList2">
                              <el-button size="small" type="primary">点击上传</el-button>
                              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                          </el-upload>
                      </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
                            <el-button @click="resetForm('ruleForm')">重置</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <div class="common-content-bottom-box">
                <div class="table_search_box">
                    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                          <el-form-item label="活动名称">
                            <el-input v-model="searchForm.searchName" placeholder="请输入" size="small"></el-input>
                          </el-form-item>
                        <el-form-item>
                          <el-button type="primary" @click="search" size="small">查询</el-button>
                          <el-button type="primary" @click="initsearch" size="small" plain>清空</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="table_box">
                    <el-table
                        :data="tableData"
                        stripe
                        style="width: 100%">
                        <el-table-column
                        prop="id"
                        label="编号"
                        width="80"
                        align="center">
                        </el-table-column>
                        <el-table-column
                        prop="name"
                        label="活动名称"
                        width="200"
                        align="center">
                        </el-table-column>
                        <el-table-column
                        prop="price"
                        label="费用"
                        width="200"
                        align="center">
                        </el-table-column>
                        <el-table-column
                        prop="level"
                        label="排序"
                        width="180"
                        align="center">
                        </el-table-column>
                        <el-table-column
                        prop="activityIndex"
                        label="活动期数"
                        width="180"
                        align="center">
                        </el-table-column>
                        <el-table-column
                        prop="minge"
                        label="活动名额"
                        width="180"
                        align="center">
                        </el-table-column>
                        <el-table-column
                        label="操作"
                        align="center">
                        <template slot-scope="scope">
                            <el-button @click="getDesc(scope.row.id)" type="primary" size="medium">编辑</el-button>
                            <el-button @click="del(scope.row.id)" type="danger" size="medium">删除</el-button>
                            <el-button @click="lookLogs(scope.row.id)" type="success" size="medium">查看</el-button>
                        </template>
                        </el-table-column>
                    </el-table>
                    <pagination
                    :total="total"
                    :limit="pageSize"
                    :page="pageNumber"
                    :pageSize="pageSize"
                    @pageChange="pageChange"
                    ></pagination>
                </div>
            </div>
        </div>
        <eventLogs-box ref="eventLogsBox"></eventLogs-box>
    </div>
</template>
<script>
import { UPLOAD_URL } from '@/utils/http.js';
import Pagination from "@/components/pagination.vue";
import eventLogsBox from "@/components/dialogbox/eventLogsBox.vue";
export default {
    components: {
        Pagination,
        eventLogsBox
    },
  data() {
    return {
        uploadNum:1,
        UPLOAD_URL,
        boxIsShow:false,
        ruleForm: {
            id:0,
            name: '',
            price: '',
            level: '',
            startTime: '',
            endTime: '',
            endBaoming:'',
            address:'',
            activityIndex:'',
            coverPic:'',
            atime:'',
            minge:'',
            smallImage:''
        },
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: ["blur,change"] }
          ],
          price: [
            { required: true, message: '请输入报名价格', trigger: ["blur,change"] }
          ],
          level: [
            { required: true, message: '请输入排序', trigger: ["blur,change"] }
          ],
          atime: [
            { required: true, message: '请选择活动时间', trigger: ["blur,change"] }
          ],
          endBaoming: [
            { required: true, message: '请选择截止报名时间', trigger: ["blur,change"] }
          ],
          address: [
            { required: true, message: '请输入活动地址', trigger: ["blur,change"] }
          ],
          activityIndex: [
            { required: true, message: '请输入活动期数', trigger: ["blur,change"] }
          ],
          minge: [
            { required: true, message: '请输入活动名额', trigger: ["blur,change"] }
          ]
        },
        fileList:[],
        searchForm:{
            searchName:""
        },
        total: 0,
        pageSize: 30,
        pageNumber: 1,
        tableData:[]
    };
  },
  created() {
    
  },
  methods: {
    __init() {
      this.getDataList();
    },
    getDataList(){
      var url="manager/getActivityList";
      var params={
        ...this.searchForm,
        pageSize: this.pageSize,
        pageNum: this.pageNumber
      }
      this.$post(url, params).then((res) => {
        console.log(res)
        if (res.code === 200) {
            this.tableData=res.data.list;
            this.total=res.data.total;
        } else {
          this.$message.error(res.msg)
        }
      });
    },
    pageChange(e) {
      this.pageNumber = e.page;
      this.getDataList();
    },
    search(){
      this.pageNumber=1;
      this.getDataList();
    },
    initsearch(){
        this.searchForm={
            searchName:""
        }
        this.pageNumber=1;
        this.getDataList();
    },
    submitForm(formName) {
        this.$refs[formName].validate((valid) => {
            if (valid) {
                var url="manager/editActivity";
                var params={
                    ...this.ruleForm
                }
                this.$post(url, params).then((res) => {
                    console.log(res)
                    if (res.code === 200) {
                        this.$message.success('操作成功')
                        this.getDataList();
                        this.resetForm('ruleForm');
                    } else {
                        this.$message.error(res.msg)
                    }
                });
            } else {
                console.log('error submit!!');
                return false;
            }
        });
    },
    resetForm(formName) {
        this.$refs[formName].resetFields();
        this.ruleForm.coverPic='';
        this.ruleForm.smallImage='';
        this.fileList=[];
        this.fileList2=[];
        this.ruleForm.id=0;
    },
    handleSuccess(response, file, fileList) {
        console.log(response);
        if(response.code==200){
            this.$message.success('上传成功');
            this.ruleForm.coverPic=response.data;
        }
    },
    handleSuccess2(response, file, fileList) {
        console.log(response);
        if(response.code==200){
            this.$message.success('上传成功');
            this.ruleForm.smallImage=response.data;
        }
    },
    del(id){
        this.$confirm('此操作将永久删除该活动, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            var url="manager/delActivityById";
            var params={
                id:id
            }
            this.$post(url, params).then((res) => {
                if (res.code === 200) {
                    this.$message.success('删除成功')
                    this.getDataList();
                } else {
                    this.$message.error(res.msg)
                }
            });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    getDesc(id){
        var url="manager/getActivityDesc";
        var params={
            id:id
        }
        this.$post(url, params).then((res) => {
            if (res.code === 200) {
                var dataDesc=res.data;
                this.ruleForm= {
                    id:dataDesc.id,
                    name: dataDesc.name,
                    price: dataDesc.price,
                    level: dataDesc.level,
                    startTime: dataDesc.startTime,
                    endTime: dataDesc.endTime,
                    endBaoming:dataDesc.endBaoming,
                    address:dataDesc.address,
                    activityIndex:dataDesc.activityIndex,
                    coverPic:dataDesc.coverPic,
                    atime:[dataDesc.startTime,dataDesc.endTime],
                    minge:dataDesc.minge,
                    smallImage:dataDesc.smallImage
                };
                this.fileList=[{name:'123',url:dataDesc.coverPic}];
                this.fileList2=[{name:'123',url:dataDesc.smallImage}];
            } else {
                this.$message.error(res.msg)
            }
        });
    },
    handleDateChange(dates){
      console.log(dates)
      if (dates) {
        this.ruleForm.startTime=dates[0];
        this.ruleForm.endTime=dates[1];
      }else{
        this.ruleForm.startTime="";
        this.ruleForm.endTime="";
      }
    },
    lookLogs(id){
      if (this.$refs.eventLogsBox) {
        this.$refs.eventLogsBox.tkIsShow = true;
        this.$refs.eventLogsBox.title = "查看报名记录";
        this.$refs.eventLogsBox.__init(id);
      }
    }
  }
}
</script>
<style scoped lang="scss">
  .common-box{
    background-color: #f9f9fb;
    height: 100%;
    position: relative;
  }
  .common-content-box{
    height: 95%;
    margin-top: 2%;
    width: 96%;
    display: inline-block;
  }
  .common-content-top-box{
    width: 100%;
    background-color: #fff;
    min-height: 200px;
    box-shadow: 1px 1px 6px 2px rgba(0,0,0,0.1);
    border-radius: 5px;
    text-align: left;
  }
  .form_box{
    margin-left: 20px;
    margin-top: 25px;
    width: 40%;
    display: inline-block;
  }
  .common-content-bottom-box{
    width: 100%;
    background-color: #fff;
    min-height: 200px;
    box-shadow: 1px 1px 6px 2px rgba(0,0,0,0.1);
    border-radius: 5px;
    margin-top: 30px;
    padding: 20px 0;
  }
  .table_search_box{
    text-align: left;
    width: 96%;
    margin-left: 2%;
    display: inline-block;
    margin-top: 20px;
  }
  .table_box{
    width: 96%;
    margin-left: 2%;
    height: calc(100% - 255px);
  }
</style>